import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import useEditorStore from '@/store/use-editor-store';
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react';

const AlignButton = () => {
  const editor = useEditorStore((state) => state.editor);

  const alignments = [
    {
      label: 'Align Left',
      value: 'left',
      icon: AlignLeftIcon,
    },
    {
      label: 'Align Center',
      value: 'center',
      icon: AlignCenterIcon,
    },
    {
      label: 'Align Right',
      value: 'right',
      icon: AlignRightIcon,
    },
    {
      label: 'Align Justify',
      value: 'justify',
      icon: AlignJustifyIcon,
    },
  ];

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant={'ghost'}
          size={'icon'}
          className="h-7 shrink-0 flex items-center justify-between rounded-sm hover:bg-neutral-200/80 px-1.5 overflow-hidden text-sm"
        >
          <AlignLeftIcon className="size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="fle flex-col gap-y-1">
        {alignments.map(({ label, value, icon: Icon }) => (
          <Button
            key={value}
            variant={'ghost'}
            onClick={() => {
              editor?.chain().focus().setTextAlign(value).run();
            }}
            className={cn(
              'flex items-center px-2 py-1 gap-x-2 rounded-sm hover:bg-neutral-200/80',
              editor?.isActive('textAlign', { textAlign: value }) && 'bg-neutral-200/80'
            )}
          >
            <Icon className="size-4 " />
            <span className="text-sm">{label}</span>
          </Button>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default AlignButton;
